:host(:not([hidden])) {
	display: inline-block;
	font-size: 24px;
	margin: var(--_ui5_rating_indicator_component_spacing);
	cursor: pointer;
}

:host([disabled]) {
	opacity: var(--sapContent_DisabledOpacity);
	cursor: initial;
	outline: none;
}

:host([readonly]) {
	cursor: initial;
}

:host([disabled]) .ui5-rating-indicator-item-unsel,
:host([readonly]) .ui5-rating-indicator-item-unsel {
	padding-inline: var(--_ui5_rating_indicator_readonly_item_spacing);
	width: var(--_ui5_rating_indicator_readonly_item_width);
	height: var(--_ui5_rating_indicator_readonly_item_height);
}

:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover {
	opacity: .9;
}

:host([_focused]) {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: var(--_ui5_rating_indicator_outline_offset);
	border-radius: var(--_ui5_rating_indicator_border_radius);
}

:host([size="S"]) .ui5-rating-indicator-item {
	font-size: var(--_ui5_rating_indicator_item_size_s);
}

 :host([size="L"]) .ui5-rating-indicator-item {
	font-size: var(--_ui5_rating_indicator_item_size_l);
}

[ui5-icon] {
	display: flex;
	text-shadow: var(--sapContent_TextShadow);
}

.ui5-rating-indicator-root {
	outline: none;
	position: relative;
	padding: var(--_ui5_rating_indicator_component_padding);
}

.ui5-rating-indicator-list {
	list-style-type: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.ui5-rating-indicator-item {
	position: relative;
	width: var(--_ui5_rating_indicator_item_width);
	height: var(--_ui5_rating_indicator_item_height);
}

:host([size="L"]) .ui5-rating-indicator-item:not(:last-child) {
	margin-inline-end: 0.25rem;
}

.ui5-rating-indicator-item:not(:last-child) {
	margin-inline-end: 0.1875rem;
}

.ui5-rating-indicator-item [ui5-icon] {
	width: 100%;
	height: 100%;
	color: inherit;
	user-select: none;
}

.ui5-rating-indicator-item.ui5-rating-indicator-item-sel {
	color: var(--sapContent_RatedColor);
}

.ui5-rating-indicator-item.ui5-rating-indicator-item-unsel {
	color: var(--sapContent_UnratedColor);
}

.ui5-rating-indicator-item.ui5-rating-indicator-item-half {
	color: var(--sapContent_UnratedColor);
}

.ui5-rating-indicator-item [ui5-icon].ui5-rating-indicator-half-icon {
	position: absolute;
	inset-inline-start: 50%;
	color: var(--sapContent_RatedColor);
}

.ui5-rating-indicator-half-icon-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	inset-inline-start: -50%;
	top: 0;
	z-index: 32;
	overflow: hidden;
}